<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:300px;position: relative;margin: 30px auto;overflow: hidden;height:90px;}
        .box .imgbox{position: absolute;left:0;top:0;}
        .box .imgbox img{width:300px;float: left;}

        .box input{position: absolute;width:20px;height:20px;font-size: 12px;top:35px;}
        .box input.left{left:0}
        .box input.right{right:0}
    </style>
</head>
<body>
    
    <div class="box">
        <div class="imgbox">
            <img src="./imgs/banner1.jpg" alt="">
            <img src="./imgs/banner2.jpg" alt="">
            <img src="./imgs/banner3.jpg" alt="">
            <img src="./imgs/banner4.jpg" alt="">
            <img src="./imgs/banner5.jpg" alt="">
            <img src="./imgs/banner1.jpg" alt="">
        </div>
        <div class="btns">
            <input type="button" class="left">
            <input type="button" class="right">
        </div>
    </div>

</body>
<script src="../move.js"></script>
<script>

    // 分析，设计
    class Banner{
        constructor(){
            // 选择器
            this.left = document.querySelector(".left")
            this.right = document.querySelector(".right")
            this.imgbox = document.querySelector(".imgbox")
            this.imgs = this.imgbox.children;

            // 默认显示图片的索引
            this.index = 0;

            // 完善布局，初始化
            this.init();
            // 绑定事件
            this.addEvent()
        }
        init(){
            this.imgbox.style.width = this.imgs.length * this.imgs[0].offsetWidth + "px";
            this.imgbox.style.left = -this.index * this.imgs[0].offsetWidth + "px";
        }
        addEvent(){
            const that = this;
            this.left.onclick = function(){
                // 计算索引
                that.changeIndex(0)
            }
            this.right.onclick = function(){
                // 计算索引
                that.changeIndex(1)
            }
        }
        changeIndex(d){
            if(d === 0){
                // 判断是否到达上限值
                if(this.index === 0){
                    // 到达上限值，设置为初始值：length-2
                    this.index = this.imgs.length-2

                    this.imgbox.style.left = -this.imgs[0].offsetWidth * (this.imgs.length-1) + "px";
                }else{
                    // 正常计算：左按钮，--
                    this.index--
                }
            }else{
                if(this.index === this.imgs.length-1){
                    this.index = 1;
                    this.imgbox.style.left = 0;
                }else{
                    this.index++
                }
            }
            // 根据索引，显示图片（移动图片容器）
            this.changeImg()
        }
        changeImg(){
            // 调用运动函数
            move(this.imgbox, {
                left: -this.index * this.imgs[0].offsetWidth
            })
        }
    }

    // 启动
    new Banner();

    // 问题：（右按钮）
    // 正常运动：从右向左
    // 初始值：0
    // 目标值：-300
    // 总结：初始值比目标值大

    // 最后一张时
    // 运动方向：从左向右
    // 初始值：-1200
    // 目标值：0
    // 总结：目标值大于初始值

    // 解决：
    // 步骤1：
    // 复制第一张图，放在最后
    // length-1的初始值：-1500
    // 目标值：0
    // 目标值大于初始值
    // 不仅没有解决方向问题，还重复显示了复制的图片

    // 步骤2：
    // length-1之后，显示真正要呈现的图片，索引1的图片
    // 右按钮到终点后，重置索引为1
    // 显示了真正要呈现的图片
    // length-1的初始值：-1500
    // 目标值：-300
    // 目标值大于初始值

    // 步骤3：
    // 如何实现：目标值小于初始值
    // 强行将索引为length-1时imgbox的left位置的初始值设置为：0
    // 目标值：-300
    // 初始值大于目标值
    // 从右向左



    



</script>
</html>